<!-- 正向计时器组件模板 -->
<template>
  <!-- 正向计时器容器 -->
  <div class="positive-timing-container">
    <!-- 显示计时时间 -->
    <div class="time-display">
      {{ formattedTime }}
    </div>
    <!-- 控制按钮组 -->
    <div class="control-buttons">
      <!-- 开始/暂停按钮 -->
      <button class="btn start-pause" @click="toggleTimer">
        {{ isRunning ? '暂停' : '开始' }}
      </button>
      <!-- 重置按钮 -->
      <button class="btn reset" @click="resetTimer" :disabled="!isRunning && elapsedTime === 0">
        重置
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 从 Vue 导入所需的响应式 API 和生命周期钩子
import { ref, onUnmounted } from 'vue';
// 导入 Moment.js 用于时间格式化
import moment from 'moment'; 

// -------------------- 状态管理 --------------------
// 标记计时器是否正在运行
const isRunning = ref<boolean>(false); 
// 记录已过去的时间，单位为毫秒
const elapsedTime = ref<number>(0); 
// 定时器引用，用于控制计时逻辑
let timer = null as any; 

// 使用 Moment.js 格式化时间，格式为 00:00:00
const formattedTime = ref<string>('00:00:00');

// -------------------- 计时器控制方法 --------------------
/**
 * 切换计时器的运行状态，开始或暂停计时。
 */
const toggleTimer = (): void => {
  if (isRunning.value) {
    // 停止定时器
    clearInterval(timer);
    timer = null;
  } else {
    // 计算开始计时的时间戳
    const startTime = Date.now() - elapsedTime.value;
    // 启动定时器，每 100 毫秒更新一次计时
    timer = setInterval(() => {
      elapsedTime.value = Date.now() - startTime;
      // 使用 Moment.js 格式化持续时间
      const duration = moment.duration(elapsedTime.value, 'milliseconds');
      formattedTime.value = `${pad(duration.hours())}:${pad(duration.minutes())}:${pad(duration.seconds())}`;
    }, 100);
  }
  // 切换运行状态
  isRunning.value = !isRunning.value;
};

/**
 * 重置计时器，停止计时并将时间归零。
 */
const resetTimer = (): void => {
  // 停止定时器
  clearInterval(timer);
  timer = null;
  // 标记计时器停止运行
  isRunning.value = false;
  // 重置已过去的时间
  elapsedTime.value = 0;
  // 重置显示的时间
  formattedTime.value = '00:00:00'; 
};

// -------------------- 辅助方法 --------------------
/**
 * 补零函数，确保数字显示为两位数。
 * @param num - 需要补零的数字。
 * @returns 补零后的字符串。
 */
const pad = (num: number): string => num.toString().padStart(2, '0');

// -------------------- 生命周期钩子 --------------------
/**
 * 组件卸载时清除定时器，防止内存泄漏。
 */
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped>
// 正向计时器容器样式
.positive-timing-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  // 时间显示区域样式
  .time-display {
    font-size: 2rem;
    color: #2d3436;
    margin-bottom: 1.5rem;
    font-weight: 500;
    letter-spacing: 2px;
  }

  // 控制按钮组样式
  .control-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;

    // 通用按钮样式
    .btn {
      padding: 0.5rem 0.8rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    // 开始/暂停按钮样式
    .start-pause {
      background: #4285F4;
      color: white;

      // 悬停加深色调
      &:hover {
        background: #2B65D9;
      }
    }

    // 重置按钮样式
    .reset {
      background: #EA4335;
      color: white;

      &:disabled {
        background: #b2bec3;
        cursor: not-allowed;
      }

      // 悬停加深色调
      &:not(:disabled):hover {
        background: #D93025;
      }
    }
  }
}
</style>